<!-- picker选择器 -->
<link rel="stylesheet" href="/assets/home/css/confirm.css">
<link rel="stylesheet" href="/assets/home/plugin/mui/mui.picker.css" />
<link rel="stylesheet" href="/assets/home/plugin/mui/mui.poppicker.css" />

<script src="/assets/home/plugin/mui/mui.picker.js"></script>
<script src="/assets/home/plugin/mui/mui.poppicker.js"></script>

<!-- wowjs  懒加载-->
<link rel="stylesheet" href="/assets/home/plugin/wowjs/animate.min.css" />
<script src="/assets/home/plugin/wowjs/wow.min.js"></script>


<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">订单结算</h1>
</header>

<form method="post">
    <div class="course">
        <div class="left">
            <div class="thumb">
                <img src="{$subject.thumbs_text}" alt="">
            </div>
        </div>
        <div class="right">
            <div class="name">{$subject.title}</div>
            <div class="teacher">授课老师：{$subject.teacher.name ? $subject.teacher.name : '暂无关联老师'}</div>
            <div class="type">课程分类：{$subject.category.name ? $subject.category.name : '暂无课程分类'}</div>
        </div>
    </div>


    <!-- 优惠券 -->
    <div class="coupon-info">
        <div class="text">
            优惠券：
        </div>

        <!-- 在下面给coupon做一个点击事件 -->
        <div class="coupon">请选择优惠券</div>
        <input type="hidden" name="coupon" value="" />
    </div>




    <!-- 课程价格 -->
    <div class="price-info">
        <div class="text">
            课程价格：
        </div>
        <div class="price">
            ￥{$subject.price}
        </div>
    </div>

    <!-- 支付方式 -->
    <div class="pay-info">
        <div class="text">
            支付方式：
        </div>
        <div class="pay" id="pay">余额支付</div>
        <!-- 添加隐藏域 。默认显示余额支付，因为money是自己追加的元素-->
        <input type="hidden" name="pay" value="money" />
    </div>


    <!-- 底部栏 -->
    <div class="footer">
        <div class="total">
            总价：<span id="total">{$subject.price}</span>元
        </div>

        <button type="submit" class="btn">提交</button>
    </div>
</form>
<script>

    // 懒加载
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: null // 可选滚动容器选择器，否则使用窗口
    }).init();



    // 选择支付方式
    $('#pay').click(function () {

        // 通过new mui.PopPicker()初始化popPicker组件
        var picker = new mui.PopPicker();

        // 设置数据。  最终以什么哪种方式支付，用value的值表示，传到后台
        // 给picker对象添加数据。setData() 支持数据格式为: 数组
        // 这里是自己添加的属性，到后面拿过来赋值或者渲染
        picker.setData([
            { value: 'wx', text: '微信支付' },
            { value: 'zfb', text: '支付宝' },
            { value: 'money', text: '余额支付' },
        ]);

        // console.log(picker)
        // return false

        // 显示弹框，也就是显示picker
        picker.show(function (item) {
            $("#pay").html(item[0].text)
            // 隐藏域
            $("input[name=pay]").val(item[0].value)
        })
    })

    // 选择优惠券

    // 全局定义一个变量
    var coupon;

    // 做一个try catch异常捕获
    try {
        coupon = `{$coupon}` // <?php echo $coupon ?>
        // JSON.parse()方法，解析回来变成数组结构
        coupon = JSON.parse(coupon) ? JSON.parse(coupon) : []
        // coupon = Object.keys(coupon) ? Object.keys(coupon) : []
    } catch (err) {
        // 异常就设置为一个空数组结构
        coupon = []
    }

    // console.log(coupon);


    // 优惠券正常
    if (coupon.length <= 0) {
        $(".coupon").html('暂无优惠券')
    }

    /* 在后台，把$coupon由数组转化为字符串，发送过来，coupon = `{$coupon}`才可以成功打印出来，
    如果需要再把couponz由字符串转化为数组，就用JSON.parse(coupon)
    coupon = coupon ? JSON.parse(coupon) : [];  */

    // 第一步（点击支付时拿优惠券），发送后台，函数执行完，返回来，再拿数据
    $(".coupon").click(function () {

        // console.log(coupon)

        // 如果是空数组就是长度为小于0，没有优惠券，这时候就要先做个判断
        if (coupon.length <= 0) {
            $(".coupon").html('暂无优惠券')
            return false
        }



        // 这里是循环输出数组，为下面的设置数据准备
        var data = []; //给个空数组

        // 把coupon这个数组变成一个数据结构
        // 用map()循环，把元素输出出来，用别名item指代输出的元素，输出完这些元素，这个别名item就不需要了
        coupon.map((item) => {
            // 追加一个对象数组结构，里面存放属性。相当于用循环把这些元素全部列出来，然后放到data
            data.push({
                value: item.id,
                text: `【优惠活动：${item.coupon.title}】 ${item.coupon.rate * 100} 折`,
                // 自己追加一个属性，拿到优惠券折扣的那个值
                rate: item.coupon.rate,
            })
        })


        // 第二步（点击支付时拿优惠券），这里拿到数组结构，就可以向上面支付一样，新建picker弹框，设置数据

        // 1.初始化弹出框
        var picker = new mui.PopPicker();

        //2.设置数据。把循环列出来的元素放到弹出框中
        picker.setData(data);





        // 显示弹框
        picker.show(function (item) {

            // console.log(item)

            //
            $(".coupon").html(item[0].text)
            // 隐藏域?
            $("input[name=coupon]").val(item[0].value)

            var rate = item[0].rate //折扣率
            rate = parseFloat(rate) // 折扣率，追加为浮点型

            var price = `{$subject.price}` //课程总价
            price = parseFloat(price) //课程总价，追加为浮点型

            //计算总价
            var total = price * rate
            // 保留两位小数
            total = total.toFixed(2)
            $("#total").html(total)

            // console.log(total)
            // return false
        })
    })


</script>